<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link href='http://fonts.useso.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>

    <script src='../../js/jquery.js'></script>
    <script src='../../js/jquery-ui.min.js'></script>
    <script src='js/jGravity-min.js'></script>


    <style>
        *:focus {
            outline: none;
        }
        body {
            background: #c33232;
            color: #fff;
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            margin: 30px;
            overflow: hidden;
        }
        .fa-5,
        h2 {
            font-size: 12em;
            font-weight: 600;
            display: inline-block;
            margin: 0;
        }
        #abutton {
            width: 500px;
            height: 60px;
            font-size: 2em;
            background: white;
            border: 0;
            margin-top: 10px;
            cursor: pointer;
            transition: all 0.2s;
            -moz-transition: all 0.2s;
            -webkit-transition: all 0.2s;
        }
        #abutton:hover {
            transform: scale(0.989);
            -moz-transform: scale(0.989);
            -webkit-transform: scale(0.989);
            background: #f4f4f4;
        }
        a {
            position: fixed;
            bottom: 10px;
            right: 10px;
            color: #ddd;
        }
    </style>

    <script>
        /* ------------------------------------------------------------
         * Only works nice in fullscreen :I
         * Test it out, just open the link in the corner in a new tab!
         > ------------------------------------------------------------
         */

        $(document).ready(function() {
            $('body').width(window.innerWidth).height(window.innerHeight);
            $('#abutton').on('click', albert);

            function albert() {
                $('h1').html('<span>Oh</span> <span>gosh</span><span>,</span> <span>it</span> <span>crashed!</span><span>"!"+!</span>');
                $('span, button').attr('style', 'cursor:move !important;')
                $('body').jGravity({
                    target: 'span',
                    ignoreClass: 'dontMove',
                    weight: 25,
                    depth: 100,
                    drag: true
                });
                $('#abutton').off('click', albert);
            }
        });
    </script>

</head>
<body>
<span><i class="fa fa-chain-broken fa-5"/></span>
<h2> <span> 4</span><span>0</span><span>4</span></h2>
<h1>What have you done? Just look at it. Shame...</h1>
<span><button id="abutton" value="abc">Crash me</button></span>
<a href="#" target="_blank">link</a>
</body>
</html>